<template>
	<view>
		<uni-nav-bar title="购买余额" left-icon="back" @clickLeft="$tab.back()" :statusBar="true" :fixed="true"
			:border="false"></uni-nav-bar>

		<div class="p-32 flex flex-col align-center">
			<div class="w-full">
				<u-swiper :list="banner" height="776rpx" interval="2000"></u-swiper>
			</div>
			<div class="shoukuan">
				<div class="mb-24">
					<u--input placeholder="请输入充值金额" border="surround" v-model="form.amount"></u--input>
				</div>


				<u-upload :fileList="zhifu" @afterRead="productAfterRead" @delete="productDeletePic" name="zhifu"
					:maxCount="1"></u-upload>
			</div>

			<div class="flex items-center justify-between w-full" style="margin-top: 90rpx;">
				<div class="box" @click="show = true">保存收款码</div>
				<div class="box text-FFF"
					style="border: none;background: linear-gradient( 180deg, #FF561D 33%, #FF0064 100%);"
					@click="confirm">确认提交</div>
			</div>
		</div>

		<u-action-sheet :actions="list" title="选择付款方式" :show="show" @close="show = false"
			@select="save"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zhifu: [],
				form: {
					voucher: "",
					amount: ""
				},
				list: [{
						name: "微信收款码"
					},
					{
						name: "支付宝收款码"
					}
				],
				show: false,
				banner:[
					{
						url:"https://file.fulewanjia.com/fulewanjia/profile/appImages5/tip1@2x.png"
					},
					{
						url:"https://file.fulewanjia.com/fulewanjia/profile/appImages5/tip1_zhifubao@3x.png"
					}
				],
			};
		},
		methods: {
			save(e) {
				uni.downloadFile({
					url: `https://file.fulewanjia.com/fulewanjia/profile/appImages5/${e.name == '微信收款码' ? 'shoukuan' : 'alipay'}.jpg`, //仅为示例，并非真实的资源
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								console.log('save success');
								this.$modal.msg('保存成功')
							}
						});
					}
				});
			},
			async confirm() {
				if (!this.form.voucher) {
					this.$modal.msg('请上传支付凭证!')
					return
				}
				const res = await this.$Api.index.moneyRecharge(this.form)
				this.$modal.msg('提交成功，等待后台确认!')
			},
			productDeletePic(event) {
				this.zhifu.splice(event.index, 1)
				this.form.voucher = ""
			},
			async productAfterRead(event) {
				this.$Api.common.uploadFile(event.file.url).then(res => {
					this.zhifu.push({
						url: res.url
					})
					this.form.voucher = res.fileName

				})
			},
		}
	}
</script>

<style lang="scss">
	.shoukuan {
		width: 100%;
		height: 404rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages5/tip2@3x.png) no-repeat;
		background-size: 100% 100%;
		padding: 132rpx 32rpx 0 32rpx;
	}

	.box {
		width: 320rpx;
		height: 80rpx;
		border-radius: 356rpx 356rpx 356rpx 356rpx;
		border: 2rpx solid #2C2C2C;
		text-align: center;
		line-height: 80rpx;
	}

	/deep/ .u-border {
		border-color: #abacad !important;
	}
</style>